﻿<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Verticalbar</title>
    <script type="text/javascript" src="/Utilities/webdesk/webdesk.ui.core.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/scripts/ctrls.js"></script>
    <script type="text/javascript" src="/Utilities/webdesk/Scripts/verticalbar.js"></script>
    <link rel="stylesheet" type="text/css" href="/Utilities/webdesk/Skins/win10/verticalbar.css" />
    <style type="text/css">
        html,
        body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;

        }

        body {
            overflow: hidden;
            background: url('/Utilities/webdesk/Skins/win10/bg.jpg');
            background-size: 100% 100%;
            background-color: #444;
        }

        h1 {
            font-size: 25px;
            color: #333;
            margin: 0px;
            display: block;
            overflow: hidden;
            height: 40px;
            font-weight: 900;
            white-space: nowrap;
            text-shadow: .2rem 0rem 1.2rem rgba(255, 255, 255, 1), -.2rem 0rem 1.2rem rgba(255, 255, 255, 1), 0rem .2rem 1.2rem rgba(255, 255, 255, 1), 0rem -.2rem 1.2rem rgba(255, 255, 255, 1);
        }

        h1 span {

            font-size: 15px;
            margin-left: 20px;
        }

        h1 b:before {
            content: "\a021";
            font-size: 30px;
            line-height: 40px;
            margin-right: 10px;
        }

        a.home {
            display: block;
            width: 120px;
            height: 40px;
            line-height: 40px;
            float: right;
            font-size: 14px;
            text-align: center;
            color: #333;
            text-decoration: none;
            font-weight: normal;
        }

        a.home:before {
            content: "\a020";
            font-size: 18px;
            line-height: 40px;
            margin-right: 2px;

            font-family: "webdesk_icon" !important;
        }

        #space {
            float: left;
            background-color: yellow;
            height: 200px;
            width: 200px;
            transition: width 0.3s, height 0.3s;
        }



        a {
            color: #000;
        }

        p {
            font-size: 15px;
            margin: 0px;
            padding: 0px;
            line-height: 25px;
        }

        table {
            --background-color: rgba(255, 255, 255, .6);
            width: calc(100% - 20px);
        }

        table th {
            background-color: rgba(255, 255, 255, .9);
            font-size: 16px;
        }

        table td {
            background-color: rgba(255, 255, 255, .6);
        }

        th,
        td {
            height: 25px;
            line-height: 25px;
        }

        td {
            padding: 0px 10px 0px 10px;
        }

        table tr td:first-child {
            text-align: center;
            padding: 0px;
        }

        table#eventTable tr td:first-child:before {
            content: 'on'
        }

        .intro-panel b {
            font-size: 16px !important;
            margin-top: 10px !important;
            display: block;
            margin: 10px 0px 10px 0px;
        }

        .intro-panel {
            margin: 10px;
            position: absolute;
            width: calc(100% - 140px);
            height: calc(100% - 140px);
            left: 40px;
            bottom: 0px;
            padding: 20px;
            overflow: auto;
            background-color: rgba(255, 255, 255, 0.6);
        }

        #vbar-left {
            position: absolute;
            left: 10px;
            bottom: 10px;

        }

        #vbar-right {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>

<body oncontextmenu='self.event.returnValue=false'>
    <div style="height: 40px; padding-left: 20px;">
        <h1><b class="webdesk_icon"></b>Verticalbar.js 竖形工具条 <a class='home' href="/">返回首页</a></h1>
    </div>
    <div style='margin: 10px;width: calc(100% - 20px);height: calc(100% - 20px - 40px);'>
        <div id="dropmenu-area" style="position: absolute;right: 10px;top: 50px"></div>
    </div>
    <div class="intro-panel">
        <b>简述：</b>
        <div>
            <ul>
                <li>用于页面左侧或右侧的工具条</li>
                <li>可自定义节点样式，例如：粗体、斜体、颜色</li>
                <li>属性支持双向绑定，可监听</li>
                <li>节点事件可定义</li>
            </ul>
        </div>
        <div>
            <b>演示：</b>
            <div>
                <p>演示地址：<a href='http://webdesk.weisha100.cn/ctrls/verticalbar.html'
                        target="_blank">http://webdesk.weisha100.cn/ctrls/verticalbar.html</a></p>
                <p>开源地址：<a href='https://github.com/weishakeji/WebdeskUI'
                        target="_blank">https://github.com/weishakeji/WebdeskUI</a></p>
            </div>
            <b>示例：</b>
            <pre>
    var bar = $vbar.create({
        target: '#dropmenu-area',
        width: 120,height:30
    });
    bar.add(数据源);
</pre>
        </div>
        <b>属性:</b>
        <div>
            <p>下表中，“可监听”的属性，可以通过watch()增加监听方法，类似Vue；“双向绑定”的意思是属性更改后，直接影响窗体样式。</p>
        </div>
        <table width="100%" border="0" cellspacing="1" cellpadding="1">
            <tr>
                <th scope="col" width="200px">属性</th>
                <th scope="col">说明</th>
                <th scope="col" width="60px">可监听</th>
                <th scope="col" width="80px">双向绑定</th>
            </tr>
            <tr>
                <td>target</td>
                <td>对象所在的html位置</td>
                <td>√ </td>
                <td></td>
            </tr>
            <tr>
                <td>width</td>
                <td>根菜单项的宽度，是单个宽度，控件的宽度=根菜单项数量*宽度</td>
                <td>√ </td>
                <td>√ </td>
            </tr>
            <tr>
                <td>height</td>
                <td>菜单项的高度，每一项的高度</td>
                <td>√ </td>
                <td>√ </td>
            </tr>
            <tr>
                <td>bind</td>
                <td>是否对数据源双向绑定</td>
                <td>√ </td>
                <td>√ </td>
            </tr>
        </table>
        <div>
            <b>方法：</b>
            <div>
                <p>下表只列出了常用公共方法，更多方法请参看源码。</p>
            </div>
            <table width="100%" border="0" cellspacing="1" cellpadding="1">
                <tr>
                    <th scope="col" width="100px">方法</th>
                    <th scope="col">说明</th>
                    <th scope="col">参数</th>
                </tr>
                <tr>
                    <td>add()</td>
                    <td>添加树形数据，当属于bind为true时，数据源变动会直接影响界面</td>
                    <td>示例：{title:'',url:''}</td>
                </tr>
                <tr>
                    <td>getData()</td>
                    <td>通过id获取数据项</td>
                    <td>树形节点的id
                    </td>
                </tr>
            </table>
            <b>事件：</b>
            <div>
                <p>事件支持多播，即同一个事件可以添加多个方法。事件返回值仅限bool型，虽然可以返回其它类型或不返回，但最终都会转为bool型返回值。</p>
                <p>当同一个事件中的多个方法，任一个返回false，则不再继续执行后续事件方法。如果不返回，默认是true。</p>
            </div>
            <table id="eventTable" width="100%" border="0" cellspacing="1" cellpadding="1">
                <tr>
                    <th scope="col" width="80px">事件</th>
                    <th scope="col" width="150px">说明</th>
                    <th scope="col" width="100px">参数sender</th>
                    <th scope="col">参数e</th>
                </tr>
                <tr>
                    <td>data</td>
                    <td>当数据源变更时触发</td>
                    <td>同上</td>
                    <td>e.event：事件名称<br>
                        e.action：动作，默认与e.event同值<br>
                        e.target：响应事件的html元素，此处为窗体的html<br>
                        e.data：数据源</td>
                <tr>
                    <td>click</td>
                    <td>节点点击</td>
                    <td>&nbsp;</td>
                    <td>e.data，当前节点数据项</td>
                </tr>
            </table>
        </div>
    </div>
    <div id="vbar-left"></div>
    <div id="vbar-right"></div>
</body>
<script type="text/javascript">
    var rbar = $vbar.create({
        target: '#vbar-right',
        id: 'rbar-156',
        width: 30,
        height: 'calc(100% - 100px)'
    });
    var lbar = $vbar.create({
        target: '#vbar-left',
        id: 'lbar-112',
        width: 30,
        height: 'calc(100% - 100px)'
    });
    var data = [{
        title: '功能简介功能简介功能简介',
        url: 'other/treemenu-1.html',
        intro: '基本功能简介'
    }, {
        title: '夜间模式/日间模式',
        ico: 'a032'

    }, {
        title: '成员说明',
        ico: 'a010',
        childs: [{
            title: '属性',
            ico: 'a025',
            intro: '成员属性的说明',
            url: 'other/treemenu-2.html'
        }, {
            title: '方法',
            ico: 'a023',
            url: 'other/treemenu-2.html'
        }, {
            title: '事件',
            ico: 'a024',
            url: 'other/treemenu-2.html'
        }, {
            type: 'hr'
        }, {
            title: '超链接测试',
            ico: 'a024',
            type: 'link',
            url: 'other/treemenu-2.html'
        }]
    }, {
        title: '在线帮助',
        ico: 'e72f',
        childs: [{
            title: '在线学习',
            ico: 'a025',
            intro: '成员属性的说明',
            url: 'other/treemenu-2.html'
        }, {
            title: '问题反馈',
            ico: 'a023',
            url: 'other/treemenu-2.html'
        }, {
            title: '技术咨询',
            ico: 'a024',
            url: 'other/treemenu-2.html'
        }, {
            type: 'hr'
        }, {
            title: '代理'
        }]
    }, {
        title: '关于我们',
        ico: 'a031'
    }];
    lbar.add(data);
    lbar.onclick(function (s, e) {
        console.log('点击：' + e.data.title);
    });
    var d = $dom.clone(data);
    rbar.add(d);
    rbar.onclick(function (s, e) {
        console.log('点击：' + e.data.title);
    });
</script>

</html>